<template>
	<view class="video-container">
		
		<scroll-view class="tabs-title" scroll-x="true">
			<view
				:class="active===index?'active': ''"
				v-for="(item, index) in tabList"
				:key="index"
				@click="ontabtap(index)"
			>{{ item.name }}</view>
		</scroll-view>
		
		
		<!-- ！！！key值可以决定页面重构时是否对组件进行重新渲染 -->
		<videoList
			v-for="(item, index) in videoList"
			:key="item.id+'_'+index"
			:id="item.id"
			:source="item.source"
			:title="item.title"
			:video_type="item.video_type"
			:video_url="item.video_url"
			:img_url="item.img_url"
			:datetime="item.datetime"
			:likestatus="item.likestatus"
			:likecount="item.likecount"
			@changeLikeStatus="getLikeStatus"
			@toVideoDetail="toVideoDetail"
		></videoList>
		
	</view>
</template>

<script>
	import videoList from '../../components/videoList.vue'
	
	export default {
		data() {
			return {
				active: 0,
				tabList: [
					{
						id: 'tab01',
						name: '推荐'
					},
					{
						id: 'tab02',
						name: '科普'
					},	
					{
						id: 'tab03',
						name: '体育'
					},
					{
						id: 'tab04',
						name: '文化'
					},
					{
						id: 'tab05',
						name: '旅游'
					},
					{
						id: 'tab06',
						name: '国际'
					},
					{
						id: 'tab07',
						name: '抗疫'
					}
				],
				videoList: []
			}
		},
		methods: {
			async requestVideo() {
				const res = await this.$myRequest({
					url: '/video',
					method: 'POST',
					data: {
						video_type: this.active
					}
				})
				res.data.res.forEach(item => {
					item.likestatus = Boolean(item.likestatus)
				})
				this.videoList = res.data.res
			},
			ontabtap(index) {
				this.active = index
				this.requestVideo()
			},
			toVideoDetail(data) {
				uni.navigateTo({
					url: `./videodetail?id=${data.id}&type=${data.type}`
				})
			},
			async getLikeStatus(val) {
				val.likestatus = !val.likestatus
				val.likecount = val.likestatus ? val.likecount + 1 : val.likecount - 1
				await this.$myRequest({
					url: '/video/changeVideoStatus',
					method: 'POST',
					data: {
						video_id: val.id,
						likecount: val.likecount,
						likestatus: val.likestatus
					}
				})
				this.requestVideo()
			}
		},
		components: {
			videoList
		},
		onLoad() {
			this.requestVideo()
		}
	}
</script>

<style lang="scss" scoped>
	.video-container {
		height: 100%;
		.tabs-title {
			width: 100%;
			white-space: nowrap;
			view {
				display: inline-block;
				height: 40px;
				width: 60px;
				line-height: 40px;
				color: #333;
				text-align: center;
				border-right: 1px solid #eee;
				border-bottom: 1px solid #eee;
			}
			.active {
				background: #aa0000;
				color: #ffffff;
			}
		}
	}
</style>
